<div #anchor class="x-anchor" [ngClass]="classMap">
  <div #content class="x-anchor-content">
    <ng-content></ng-content>
  </div>
  <x-affix class="x-anchor-affix" [top]="affixTop">
    <div class="x-anchor-slider" [style.height.px]="sliderHeight">
      <x-slider
        [data]="sliderData"
        layout="column"
        [activatedIndex]="activatedIndex"
        [nodeJustify]="justify"
        [nodeTpl]="sliderNodeTpl"
        (indexChange)="activatedChange($event)"
      ></x-slider>
    </div>
  </x-affix>
</div>

<ng-template #sliderNodeTpl let-node="$node">
  <span [style.padding-left.rem]="node.left - 1">{{ node.label }}</span>
</ng-template>
